<style scoped>
    .login{
        position: absolute;
        display: flex;
        width: 100%;
        margin-top: 200px;
    }
    .login_box{
        width: 400px;
        display: flex;
        flex-direction: column;
        margin: auto;
    }
    .login_btn{
        display: flex;
        flex-direction: row;
        margin: auto;
    }
</style>

<template>
    <div class="login" >
        <div class="login_box">
            <h2>欢迎登录</h2>
            <el-input v-model="username" placeholder="Username" @blur="cofimeUsername"></el-input>
            <span style="color:red" v-show="user_error">用户名输入错误</span>
            <el-input placeholder="Password" v-model="password" show-password style="margin-bottom:10px"></el-input>
            <v-verfify ref="verify" :username="username"/>
            <div class="login_btn">
                <el-button type="primary" @click="doLogin">登录</el-button>
                <el-button type="primary" @click="toReg">注册</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import * as axios from 'axios';
import getUserInfo from '@/common/common'
import { baseURL } from '../../config'
import router from '@/router';
import verify from '@/components/login/verify.vue'
import { Loading } from 'element-ui';

export default {
    name :'login',
    components: {
        'v-verfify': verify
    },
    data () {
        return {
            username: '',
            password: '',
            user_error: false,
            loading: null
        }
    },
    methods: {
        checkCode(){
            return this.$refs.verify.checkCode();
        },
        // 登录请求方法
        doLogin(){
            this.loading = Loading.service();
            let verify_ok = this.checkCode()
            if (!verify_ok){
                this.loading.close();
                this.$message.warning("验证码错误");
                return;
            }
            let args = {
                url : '/account/login',
                data : {
                    username: this.username,
                    password: this.password
                }
            }
            axios({
                method: 'post',
                url: baseURL + args.url,
                data: args.data,
            }).then (res => {
                this.loading.close();
                if (res.data.status === 0){
                    this.$message.success("登录成功");
                    if (res.headers.authorization){
                        localStorage.setItem("token", res.headers.authorization);
                        getUserInfo();
                    }
                    router.push("/");
                }
                else {
                    this.$message.warning("用户名或密码错误")
                }
            }).catch (error => {
                this.loading.close();
                this.$message.error({
                    message: '其他服务器错误'+error,
                })
            })
        },
        // 对比用户名
        cofimeUsername(){
            if (this.username !== ''){
                axios({
                    method: 'get',
                    url: baseURL + '/account/confirm-user',
                    params: {
                        'username': this.username
                    }
                }).then(res => {
                    this.user_error = (res.data.status === 1)? false : true;
                })
            }
        },
        // 跳转到注册页面
        toReg(){
            router.push("/reg")
        }
    }
}
</script>